import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text("hello"),
            centerTitle: true,
          ),
          body: const Column(
            children: [
              MyApp(), SizedBox(height: 10), //给个间距
              Circular(), SizedBox(height: 10), ClipImage(),
              SizedBox(height: 10), LocalPic(), SizedBox(height: 10),
              LocalPic2()
            ],
          ))));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      margin: const EdgeInsets.fromLTRB(0, 40, 0, 0),
      // alignment: Alignment.centerRight,
      height: 150,
      width: 250,
      decoration: const BoxDecoration(color: Colors.amber),
      child: Image.network(
        'https://www.itying.com/themes/itying/images/ionic4.png',
        // alignment: Alignment.centerLeft,
        // fit: BoxFit.cover
        // scale: 0.2,//放大縮小
        // repeat: ImageRepeat.repeatX, //x 方向平铺重复
      ),
    ));
  }
}
/*
图片地址:
https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png
https://www.itying.com/themes/itying/images/ionic4.png
*/

/*
浏览器打不开图片的话。 输入flutter run -d chrome --web-renderer html
*/
//方法一：圆形、圆角图片, 用Decoration实现
class Circular extends StatelessWidget {
  const Circular({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(0, 0, 0, 0),
      height: 150,
      width: 150,
      decoration: BoxDecoration(
          color: Colors.yellow,
          // borderRadius: BorderRadius.circular(75), //圆形 半径是外容器一半
          borderRadius: BorderRadius.circular(15), //圆角
          image: const DecorationImage(
              image: NetworkImage(
                  "https://www.itying.com/themes/itying/images/ionic4.png"),
              fit: BoxFit.cover)),
    );
  }
}

//方法二：圆形、圆角图片, 用ClipOval实现
class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://www.itying.com/themes/itying/images/ionic4.png",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

//加载本地图片
class LocalPic extends StatelessWidget {
  const LocalPic({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 150,
      width: 150,
      child: Image.asset("images/img1.jpg"),
    );
  }
}

//加载本地图片
class LocalPic2 extends StatelessWidget {
  const LocalPic2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.asset("images/img1.jpg", fit: BoxFit.cover),
    );
  }
}
